<template>
    <div id="head" class="flex justify-between align-center">
        <section id="Logo" class="logoBlock">
            <img class="pointer" :src="require('@/assets/images/logo.png')" alt="" @click="goto(0,'')">
        </section>
        <section id="standardTheme" class="flex-1">
            <ul class="standardList flex align-center justify-center">
                <li class="standardItem" :class="{'active':activeType==0}" @click="goto(0,'')">品牌规范</li>
                <li class="standardItem" :class="{'active':activeType==1}" @click="goto(1,'exper')">体验规范</li>
                <li class="standardItem" :class="{'active':activeType==2}" @click="goto(2,'auth')">IP授权</li>
            </ul>
        </section>
        <section id="Mine" class=" flex align-center">
            <div class="searchStandard">
                <el-input class="StandardIpt" v-model="keyword" placeholder="搜索规范…" @keyup.enter.native="searchStand()" prefix-icon="el-icon-search"></el-input>
            </div>
            <div>
                <el-dropdown trigger="click">
                    <span class="el-dropdown-link pointer">
                        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                    </span>
                    <div>
                        <el-dropdown-menu slot="dropdown" id="menuHead" style="padding:0;width:160px;border:none;border-radius:15px;box-shadow: 0 0 10px 0 rgba(0,0,0,0.10);">
                            <el-dropdown-item class="clearfix">
                                <div @click="goAdmin('/myStand');">我的规范</div>
                            </el-dropdown-item>
                            <el-dropdown-item class="clearfix" v-if='$store.state.userInfo.role_id!="3"'>
                                <div @click="goAdmin('/authManage');">IP授权管理中心</div>
                            </el-dropdown-item>
                            <el-dropdown-item class="clearfix" v-if='$store.state.userInfo.role_id!="3"'>
                                <div @click="$store.commit('SET_ADMIN_ACTIVE_MENU',101);goAdmin('/admin/brandMan');">后台管理中心</div>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </div>
                    
                </el-dropdown>
            </div>
        </section>


    </div>
</template>
<script>
export default {
    name:'hd',
    data(){
        return{
			standardIndex:0,
            keyword:'',
            activeType:''
        }
    },
    mounted(){
        this.activeType = this.$store.state.activeType
    },
    methods:{
        searchStand(){
            if(this.keyword){
                this.$store.commit('SET_ACTIVETYPE',-1);
                this.activeType = -1;
                this.$router.push({path:'/resultStand',query:{'keyword':this.keyword}})
            }
        },
        goto(type,path){
            this.activeType = type;
            this.$store.commit('SET_ACTIVETYPE',type)
            this.$router.push('/'+path);
        },
        goAdmin(path){
            this.activeType = -1;
            this.$store.commit('SET_ACTIVETYPE',-1)
            this.$router.push(path);
        }
    }
}
</script>
<style scoped lang='less'>




#head{
    height: 80px;
    background: #FFFFFF;
    box-shadow: 0 0 20px 0 rgba(0,0,0,0.05);
    padding: 0 80px;
    min-width: 1200px;
}
.standardItem{
    margin: 0 50px;
    line-height: 40px;
    font-size: 24px;
    cursor: pointer;
    color: #95A5B6;
}
.standardItem.active{
    color: #0064FF;
    border-bottom: 2px solid #0064FF;
    font-weight: 500;
}
.searchStandard{
    margin-right: 20px;
}
/deep/ .StandardIpt .el-input__inner{
    width: 300px;
    border-radius: 40px;
    border: none;
    background: #F4F5F8;
    border-radius: 20px;
    color: #95A5B6;
    height: 40px;
}
/deep/.searchStandard .el-input__inner{
    width: 300px;
    border-radius: 40px;
}

/deep/ .el-dropdown-menu__item:focus,/deep/ .el-dropdown-menu__item:not(.is-disabled):hover{
    background-color: #F4F5F8;
    color: #000;
}
/deep/ #menuHead .el-dropdown-menu.el-popper{
    width: 160px !important;
    padding: 0 !important;
    border: none;
    border-radius: 15px;
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
    overflow: hidden;
    cursor: pointer;
    background: #fff;
    top: 67px !important;
    left: 1740px !important;
}
/deep/ .el-dropdown-menu__item{
    height: 39px;
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    line-height: 39px;
    padding: 0;
}
/deep/ .popper__arrow{
    display: none;
}
</style>

